<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG/Base64预览工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        textarea {
            width: 100%;
            height: 200px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: monospace;
            resize: vertical;
        }
        .controls {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        button {
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #45a049;
        }
        .preview-container {
            border: 1px solid #ddd;
            padding: 20px;
            min-height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f9f9f9;
        }
        .tab-buttons {
            display: flex;
            margin-bottom: -1px;
        }
        .tab-button {
            padding: 10px 20px;
            background-color: #999;
            border: 1px solid #ddd;
            border-bottom: none;
            cursor: pointer;
            border-radius: 4px 4px 0 0;
            margin-right: 5px;
            color: #fff;
        }
        .tab-button.active {
            background-color: #4caf50;
            border-bottom: 1px solid #fff;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .error {
            color: red;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>SVG/Base64预览工具</h1>
    
    <div class="container">
        <div class="tab-buttons">
            <button class="tab-button active" onclick="openTab('svgTab')">SVG代码</button>
            <button class="tab-button" onclick="openTab('base64Tab')">Base64编码</button>
        </div>
        
        <div id="svgTab" class="tab-content active">
            <h3>输入SVG代码：</h3>
            <textarea id="svgInput" placeholder="在此输入SVG代码..."></textarea>
        </div>
        
        <div id="base64Tab" class="tab-content">
            <h3>输入Base64编码：</h3>
            <textarea id="base64Input" placeholder="在此输入Base64编码..."></textarea>
        </div>
        
        <div class="controls">
            <button onclick="previewImage()">预览图片</button>
            <button onclick="clearAll()">清空</button>
        </div>
        
        <div id="errorMessage" class="error"></div>
        
        <h3>预览结果：</h3>
        <div class="preview-container" id="previewContainer">
            <p>预览将显示在这里...</p>
        </div>
    </div>

    <script>
        function openTab(tabId) {
            // 隐藏所有标签内容
            const tabContents = document.getElementsByClassName('tab-content');
            for (let i = 0; i < tabContents.length; i++) {
                tabContents[i].classList.remove('active');
            }
            
            // 取消所有标签按钮的活动状态
            const tabButtons = document.getElementsByClassName('tab-button');
            for (let i = 0; i < tabButtons.length; i++) {
                tabButtons[i].classList.remove('active');
            }
            
            // 显示选中的标签内容并激活按钮
            document.getElementById(tabId).classList.add('active');
            event.currentTarget.classList.add('active');
        }
        
        function previewImage() {
            const errorElement = document.getElementById('errorMessage');
            errorElement.textContent = '';
            
            const previewContainer = document.getElementById('previewContainer');
            
            // 检查当前活动的标签
            const activeTab = document.querySelector('.tab-content.active').id;
            
            try {
                if (activeTab === 'svgTab') {
                    const svgInput = document.getElementById('svgInput').value.trim();
                    if (!svgInput) {
                        throw new Error('请输入SVG代码');
                    }
                    
                    // 直接显示SVG
                    previewContainer.innerHTML = svgInput;
                    
                    // 检查是否成功解析为SVG
                    if (!previewContainer.querySelector('svg')) {
                        throw new Error('输入的代码不是有效的SVG');
                    }
                    
                } else if (activeTab === 'base64Tab') {
                    const base64Input = document.getElementById('base64Input').value.trim();
                    if (!base64Input) {
                        throw new Error('请输入Base64编码');
                    }
                    
                    // 创建图片元素
                    const img = document.createElement('img');
                    img.src = base64Input.startsWith('data:') ? base64Input : `data:image/svg+xml;base64,${base64Input}`;
                    
                    // 图片加载成功时
                    img.onload = function() {
                        previewContainer.innerHTML = '';
                        previewContainer.appendChild(img);
                    };
                    
                    // 图片加载失败时
                    img.onerror = function() {
                        throw new Error('Base64编码无效或不是支持的图片格式');
                    };
                    
                    previewContainer.innerHTML = '加载中...';
                    previewContainer.appendChild(img);
                }
            } catch (error) {
                errorElement.textContent = error.message;
                previewContainer.innerHTML = '<p>预览将显示在这里...</p>';
            }
        }
        
        function clearAll() {
            document.getElementById('svgInput').value = '';
            document.getElementById('base64Input').value = '';
            document.getElementById('previewContainer').innerHTML = '<p>预览将显示在这里...</p>';
            document.getElementById('errorMessage').textContent = '';
        }
    </script>
</body>
</html>